import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,TextInput
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import DeviceStorage from '../../common/DeviceStorage';
import {BASEURL} from '../../api/api'
const dismissKeyboard = require('dismissKeyboard');
export default class Phone extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'手机号码修改',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      phone: '',//this.props.navigation.getParam('phone'),
      userId:this.props.navigation.getParam('userId'),
      password: this.props.navigation.getParam('password'),
      pwd:'',
    })
  }
  _change(val){
    this.setState({nickName: val})
  }
  _save(){
    dismissKeyboard();
    let {pwd,phone,password} = this.state;
    if(!pwd){
      this.refs.toast.show("请输入账户密码");
      return;
    } else if(pwd != password){
      this.refs.toast.show("您输入的账户密码不正确");
      return;
    } else if(phone.length != 11){
      this.refs.toast.show("请输入正确的手机号码");
    } else {
      fetch(BASEURL+'per/saveUserInfo?userId='+this.state.userId+'&phone='+this.state.phone)
      .then(res => res.json())
      .then(result => {
        //console.log('res',result);
        if(result.succ == '1'){
          this.refs.toast.show("设置成功");
          setTimeout(()=>{
            const {goBack,state} = this.props.navigation;
            state.params.callback(phone);
            this.props.navigation.goBack(); 
          },1500)
        }
      })
      
    }
    
    
  }
  _changePwd(val){
    this.setState({
      pwd:val
    })
  }
  _change(val){
    this.setState({
      phone:val
    })
  }
  render(){
    return(
      <View style={styles.container}>
        <View style={styles.inputView}>
          <Text style={styles.nameText}>密码</Text>
          <TextInput 
            ref={this.props._ref}
            placeholder='请输入账户密码'
            style={styles.searchInput}
            underlineColorAndroid="transparent"
            onChangeText={(val)=>this._changePwd(val)}
            //value={this.state.nickName}
            secureTextEntry={true}
            returnKeyType='done'
            placeholderTextColor='#aaa'
          />
          <TouchableOpacity onPress={()=>{this.setState({pwd:''})}}>
            <Image style={styles.closeStyle} source={require('../../images/mine/icon_close.png')} />
          </TouchableOpacity>
        </View>
        <Text style={styles.tipText}>为了您的账户安全，需要验证账户密码</Text>
        <View style={styles.inputView}>
          <Text style={styles.nameText}>手机号</Text>
          <TextInput 
            ref={this.props._ref}
            placeholder='请输入新的手机号码'
            style={styles.searchInput}
            underlineColorAndroid="transparent"
            onChangeText={(val)=>this._change(val)}
            //value={this.state.nickName}
            returnKeyType='done'
            keyboardType="numeric"
            placeholderTextColor='#aaa'
          />
          <TouchableOpacity onPress={()=>{this.setState({phone:''})}}>
            <Image style={styles.closeStyle} source={require('../../images/mine/icon_close.png')} />
          </TouchableOpacity>
        </View>
        
        <MyButton btnStyle={{marginTop:60,}}  text='确 定' press={()=>{this._save()}}/>
        <Toast ref="toast" position='bottom' positionValue={200} />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  closeStyle:{
    width:16,
    height:16,
  },
  tipText:{
    paddingTop:10,
    paddingBottom:10,
    paddingLeft:15,
    color:'#999'
  },
  nameText:{
    fontSize:16,
  },
  container: {
    backgroundColor:'#eee',
    flex: 1,
  },
  searchInput:{
    marginLeft:15,
    padding:0,
    flex:1,
    height: 46, 
    fontSize:15,
  },
  inputView:{
    marginTop:10,
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:15,
    paddingRight:15,
    backgroundColor:'white',
    //borderWidth:1,
    //borderColor:'white',
  },

})